<template>
  <div class="currency">
    <div class="head">
      <h1>MCU</h1>
      <div class="head-btn">
        <el-button class="btn" type="primary">通用MCU</el-button>
        <el-button class="btn" type="primary" plain @click="goElectric"
          >电机SOC</el-button
        >
        <el-button type="primary" plain @click="goWireless">无线SOC</el-button>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="screen">
          <h3>筛选区</h3>
          <el-dropdown :hide-on-click="false" trigger="click">
            <span class="el-dropdown-link" ref="dropdownName">
              自定义筛选项
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" ref="dropdown">
              <el-row v-if="propertiesBox.length > 0">
                <el-col :span="12" v-for="val in propertiesBox" :key="val.propertyId">
                  <el-dropdown-item>
                    <el-checkbox-group v-model="val.active">
                      <el-checkbox>
                        {{ val.propertyName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-dropdown-item>
                </el-col>
              </el-row>
              <el-button
                type="primary"
                size="small"
                class="sure"
                @click="SureEdit()"
                >确认</el-button
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-divider></el-divider>
        <!-- 默认筛选项 -->
        <div :class="brandType ? 'show' : 'hidden'">
          <h4>品牌：</h4>
          <ul class="brand-list" ref="brandTypeRef" v-if="brands.length>0">
            <li v-for="(item, index) in brands" :key="item.brandId">
              <span
                :class="{ active: item.active }"
                @click="handleSiftingSort(index, item.active, 'brands')"
              >
                {{ item.brandName }}</span
              >
            </li>
          </ul>
          <p
            class="unfold"
            @click="brandType = !brandType"
            v-show="brandHieight > 40"
          >
            {{ brandType ? "收起" : "更多" }}
            <i
              :class="brandType ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            ></i>
          </p>
        </div>
        <el-divider></el-divider>
        <div :class="packagesType ? 'show' : 'hidden'">
          <h4>封装：</h4>
          <ul
            :class="
              packagesType==true && packagesHieight >= 200 ? 'brand-list brandheight' : 'brand-list'
            "
            ref="packagesTypeRef"
            v-if="packages.length>0"
          >
            <li v-for="(item, index) in packages" :key="index">
              <span
                :class="{ active: item.active }"
                @click="handleSiftingSort(index, item.active, 'packages')"
              >
                {{ item.packageName }}</span
              >
            </li>
          </ul>
          <p
            class="unfold"
            @click="packagesType = !packagesType"
            v-show="packagesHieight > 40"
          >
            {{ packagesType ? "收起" : "更多" }}
            <i
              :class="packagesType ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            ></i>
          </p>
        </div>
        <el-divider></el-divider>
        <div :class="packingType ? 'show' : 'hidden'">
          <h4>包装：</h4>
          <ul class="brand-list" ref="packingTypeRef" v-if="packing.length>0">
            <li v-for="(item, index) in packing" :key="index">
              <span
                :class="{ active: item.active }"
                @click="handleSiftingSort(index, item.active, 'packing')"
              >
                {{ item.packingName }}</span
              >
            </li>
          </ul>
          <p
            class="unfold"
            @click="packingType = !packingType"
            v-show="packingHieight > 40"
          >
            {{ packingType ? "收起" : "更多" }}
            <i
              :class="packingType ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            ></i>
          </p>
        </div>
        <el-divider></el-divider>
        <!-- 动态左边 -->
        <div class="custom" v-if="propertiesLeft.length > 0">
          <div
            class="custom-list"
            v-for="(item, index) in propertiesLeft"
            :key="item.propertyId"
          >
            <div :class="item.propLeftType ? 'show' : 'hidden'">
              <h4>{{ item.propertyName }}：</h4>
              <ul class="brand-list" :ref="`propLeftTypeRef${index}`">
                <li v-for="(val, key) in item.valueText" :key="key">
                  <span
                    :class="{ active: val.active }"
                    @click="handleCustomFilter(key, index, item)"
                  >
                    {{ val }}</span
                  >
                </li>
              </ul>
              <p
                class="unfold"
                v-show="propLeftHieight[item.model] > 40"
                @click="getpropLeftMore(item, index)"
              >
                {{ item.propLeftType ? "收起" : "更多" }}
                <i
                  :class="
                    item.propLeftType ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                  "
                ></i>
              </p>
            </div>
            <el-divider></el-divider>
          </div>
        </div>
        
        <!-- 自定义选项 -->
        <!-- <div class="custom" v-if="coustom.length > 0">
          <div
            class="custom-list"
            v-for="(item, index) in coustom"
            :key="item.id"
          >
            <div :class="item.customType ? 'show' : 'hidden'">
              <h4>{{ item.name }}：</h4>
              <ul class="brand-list" :ref="`customTypeRef${index}`">
                <li v-for="(val, key) in item.child" :key="val.id">
                  <span
                    :class="{ active: val.active }"
                    @click="handleCustomFilter(key, index, item)"
                  >
                    {{ val.name }}</span
                  >
                </li>
              </ul>
              <p
                class="unfold"
                v-show="customHieight[item.model] > 40"
                @click="getMore(item, index)"
              >
                {{ item.customType ? "收起" : "更多" }}
                <i
                  :class="
                    item.customType ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                  "
                ></i>
              </p>
            </div>
            <el-divider></el-divider>
          </div>
        </div> -->
        <!-- 过滤数据 -->
        <div class="filter-box">
          <div v-if="filter.length > 0" class="filter-content">
            <p>已筛选：</p>
            <el-tag
              v-for="(item, index) in filter"
              :key="index"
              closable
              @close="handleClose(item)"
              type="info"
            >
              {{
                item.combinationName
                  ? item.combinationName
                  : item[0].combinationName
              }}
            </el-tag>
          </div>
          <p v-else>您还未设置筛选内容哦~</p>
        </div>
        <div class="filter-table">
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            :header-cell-style="{ background: '#eee' }"
          >
            <el-table-column fixed width="250">
              <template slot="header" slot-scope="scope" class="header-left">
                <el-button type="info">对比</el-button>
                <el-input
                  v-model="record.partNum"
                  size="mini"
                  placeholder="请输入型号"
                />
              </template>
              <template slot="scope">
                <!-- <el-radio v-model="radio">备选项</el-radio> -->
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="province" label="省份"> </el-table-column>
            <el-table-column prop="city" label="市区"> </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column prop="zip" label="邮编"> </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 动态右边 -->
      <div class="right">
        <h3>参数筛选</h3>
        <el-menu background-color="#eee">
          <el-submenu :index="index" v-for="(item,index) in this.propertiesRight" :key="index">
            <template slot="title">
              <i class="el-icon-set-up"></i>
              <span>{{item.propertyName}}</span>
            </template>
            <el-menu-item>
              <el-input
                v-model="record.packageInput"
                placeholder="请输入内容"
                suffix-icon="el-icon-search"
              >
              </el-input>
            </el-menu-item>
            <el-menu-item-group>
              <el-menu-item v-for="(val,key) in item.valueText" :key="key">
                <el-checkbox-group
                  v-model="val.active"
                  @change="handlerPackages(val)"
                >
                  <el-checkbox :label="val">
                    {{ val.text }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-cpu"></i>
              <span>内存</span>
            </template>
            <el-menu-item>
              <el-input
                v-model="record.memoryInput"
                placeholder="请输入内容"
                suffix-icon="el-icon-search"
              >
              </el-input>
            </el-menu-item>
            <el-menu-item-group>
              <el-menu-item v-for="val in brand" :key="val.id">
                <el-checkbox-group
                  v-model="val.active"
                  @change="handlerMemory(val)"
                >
                  <el-checkbox :label="val">
                    {{ val.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-cpu"></i>
              <span>EEPROM(Bytes)</span>
            </template>
            <el-menu-item>
              <el-input
                v-model="record.eepromInput"
                placeholder="请输入内容"
                suffix-icon="el-icon-search"
              >
              </el-input>
            </el-menu-item>
            <el-menu-item-group>
              <el-menu-item v-for="val in brand" :key="val.id">
                <el-checkbox-group
                  v-model="val.active"
                  @change="handlerEeprom(val)"
                >
                  <el-checkbox :label="val">
                    {{ val.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-cpu"></i>
              <span>最大I/Os</span>
            </template>
            <el-menu-item>
              <el-input
                v-model="record.maxioInput"
                placeholder="请输入内容"
                suffix-icon="el-icon-search"
              >
              </el-input>
            </el-menu-item>
            <el-menu-item-group>
              <el-menu-item v-for="val in brand" :key="val.id">
                <el-checkbox-group
                  v-model="val.active"
                  @change="handlerMaxio(val)"
                >
                  <el-checkbox :label="val">
                    {{ val.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-cpu"></i>
              <span>ADC</span>
            </template>
            <el-menu-item>
              <el-input
                v-model="record.adcInput"
                placeholder="请输入内容"
                suffix-icon="el-icon-search"
              >
              </el-input>
            </el-menu-item>
            <el-menu-item-group>
              <el-menu-item v-for="val in brand" :key="val.id">
                <el-checkbox-group
                  v-model="val.active"
                  @change="handlerAdc(val)"
                >
                  <el-checkbox :label="val">
                    {{ val.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu> -->
          <!-- 常见外设 -->
          <!-- <el-submenu index="6" class="common">
            <template slot="title">
              <i class="el-icon-cpu"></i>
              <span>常见外设</span>
            </template>
            <el-submenu
              :index="'6-' + index"
              v-for="(item, index) in peripherals"
              :key="index"
            >
              <template slot="title">
                <i class="el-icon-cpu"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="(val, key) in item.child" :key="key">
                  <el-checkbox-group
                    v-model="val.active"
                    @change="handlerPeripherals(index, val)"
                  >
                    <el-checkbox :label="val">
                      {{ val.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-submenu> -->
          <!-- 通讯接口 -->
          <!-- <el-submenu index="7" class="common">
            <template slot="title">
              <i class="el-icon-cpu"></i>
              <span>通讯接口</span>
            </template>
            <el-submenu
              :index="'7-' + index"
              v-for="(item, index) in interface"
              :key="index"
            >
              <template slot="title">
                <i class="el-icon-cpu"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="(val, key) in item.child" :key="key">
                  <el-checkbox-group
                    v-model="val.active"
                    @change="handlerInterface(index, val)"
                  >
                    <el-checkbox :label="val">
                      {{ val.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-submenu> -->
          <!-- 其他特性 -->
          <!-- <el-submenu index="8" class="common">
            <template slot="title">
              <i class="el-icon-cpu"></i>
              <span>其他特性</span>
            </template>
            <el-submenu
              :index="'8-' + index"
              v-for="(item, index) in features"
              :key="index"
            >
              <template slot="title">
                <i class="el-icon-cpu"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="(val, key) in item.child" :key="key">
                  <el-checkbox-group
                    v-model="val.active"
                    @change="handlerFeatures(index, val)"
                  >
                    <el-checkbox :label="val">
                      {{ val.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-submenu> -->
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
import { getVideoBrand } from "@/api/home.js";
import { getList, getCategoriesOption } from "@/api/model";
export default {
  data() {
    return {
      categoryId: "",
      brands: [],
      propertiesBox: [],
      propertiesLeft: [],
      propLeftHieight:{},
      propertiesRight: [],
      brand: [],
      brandType: false,
      packagesType: false,
      packagesHieight: 0,
      brandHieight: 0,
      packing: [],
      packingType: false,
      packingHieight: 0,
      tempBrandArr: [],
      systemIds: [], //用户自定义筛选
      customHieight: {},
      allArr: [[]],
      filterCustomName: [[]],
      customArr: [],
      coustom: [
        //自定义筛选项
        {
          id: 301,
          name: "华大",
          model: 0,
          child: [
            {
              id: 309,
              name: "松翰",
            },
            {
              id: 310,
              name: "健天",
            },
            {
              id: 311,
              name: "复旦微",
            },
            {
              id: 312,
              name: "辉芒微",
            },
            {
              id: 313,
              name: "东软载波",
            },
            {
              id: 339,
              name: "松翰",
            },
            {
              id: 330,
              name: "健天",
            },
            {
              id: 331,
              name: "复旦微",
            },
            {
              id: 332,
              name: "辉芒微",
            },
            {
              id: 333,
              name: "东软载波",
            },
            {
              id: 409,
              name: "松翰",
            },
            {
              id: 410,
              name: "健天",
            },
            {
              id: 3411,
              name: "复旦微",
            },
            {
              id: 3412,
              name: "辉芒微",
            },
            {
              id: 3143,
              name: "东软载波",
            },
          ],
        },
        {
          id: 302,
          name: "Microchip",
          model: 1,
          child: [
            {
              id: 4311,
              name: "复旦微",
            },
            {
              id: 4312,
              name: "辉芒微",
            },
            {
              id: 4313,
              name: "东软载波",
            },
            {
              id: 4339,
              name: "松翰",
            },
            {
              id: 4330,
              name: "健天",
            },
            {
              id: 4331,
              name: "复旦微",
            },
            {
              id: 4332,
              name: "辉芒微",
            },
            {
              id: 3343,
              name: "东软载波",
            },
          ],
        },
      ],
      peripherals: [
        {
          comId: 1,
          name: "串口",
          child: [
            {
              id: 309,
              name: "松翰",
            },
            {
              id: 310,
              name: "健天",
            },
            {
              id: 311,
              name: "复旦微",
            },
            {
              id: 312,
              name: "辉芒微",
            },
            {
              id: 313,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 2,
          name: "运放",
          child: [
            {
              id: 5309,
              name: "松翰",
            },
            {
              id: 5310,
              name: "健天",
            },
            {
              id: 5311,
              name: "复旦微",
            },
            {
              id: 5312,
              name: "辉芒微",
            },
            {
              id: 5313,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 3,
          name: "比较器",
          child: [
            {
              id: 56309,
              name: "松翰",
            },
            {
              id: 56310,
              name: "健天",
            },
            {
              id: 56311,
              name: "复旦微",
            },
            {
              id: 56312,
              name: "辉芒微",
            },
            {
              id: 56313,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 4,
          name: "通用定时器",
          child: [
            {
              id: 535609,
              name: "松翰",
            },
            {
              id: 535610,
              name: "健天",
            },
            {
              id: 535611,
              name: "复旦微",
            },
            {
              id: 535612,
              name: "辉芒微",
            },
            {
              id: 535613,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 5,
          name: "12C",
          child: [
            {
              id: 53096,
              name: "松翰",
            },
            {
              id: 53106,
              name: "健天",
            },
            {
              id: 53116,
              name: "复旦微",
            },
            {
              id: 53126,
              name: "辉芒微",
            },
            {
              id: 53136,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 6,
          name: "SPI",
          child: [
            {
              id: 53096,
              name: "松翰",
            },
            {
              id: 53106,
              name: "健天",
            },
            {
              id: 53116,
              name: "复旦微",
            },
            {
              id: 53126,
              name: "辉芒微",
            },
            {
              id: 53136,
              name: "东软载波",
            },
          ],
        },
      ], //常见外设
      peripheralsDate: {},
      allPeripheralsDate: [[]],
      allPeripheralsArr: [[]],
      peripheralsId: [[]],
      interface: [
        {
          comId: 1,
          name: "USB",
          child: [
            {
              id: 309,
              name: "松翰",
            },
            {
              id: 310,
              name: "健天",
            },
            {
              id: 311,
              name: "复旦微",
            },
            {
              id: 312,
              name: "辉芒微",
            },
            {
              id: 313,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 2,
          name: "12S",
          child: [
            {
              id: 5309,
              name: "松翰",
            },
            {
              id: 5310,
              name: "健天",
            },
            {
              id: 5311,
              name: "复旦微",
            },
            {
              id: 5312,
              name: "辉芒微",
            },
            {
              id: 5313,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 3,
          name: "CAN",
          child: [
            {
              id: 56309,
              name: "松翰",
            },
            {
              id: 56310,
              name: "健天",
            },
            {
              id: 56311,
              name: "复旦微",
            },
            {
              id: 56312,
              name: "辉芒微",
            },
            {
              id: 56313,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 4,
          name: "LIN",
          child: [
            {
              id: 535609,
              name: "松翰",
            },
            {
              id: 535610,
              name: "健天",
            },
            {
              id: 535611,
              name: "复旦微",
            },
            {
              id: 535612,
              name: "辉芒微",
            },
            {
              id: 535613,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 5,
          name: "SDIO",
          child: [
            {
              id: 53096,
              name: "松翰",
            },
            {
              id: 53106,
              name: "健天",
            },
            {
              id: 53116,
              name: "复旦微",
            },
            {
              id: 53126,
              name: "辉芒微",
            },
            {
              id: 53136,
              name: "东软载波",
            },
          ],
        },
      ], //通讯接口
      interfaceDate: {},
      allInterfaceDate: [[]],
      allInterfaceArr: [[]],
      interfaceId: [[]],
      features: [
        {
          comId: 1,
          name: "DAC",
          child: [
            {
              id: 309,
              name: "松翰",
            },
            {
              id: 310,
              name: "健天",
            },
            {
              id: 311,
              name: "复旦微",
            },
            {
              id: 312,
              name: "辉芒微",
            },
            {
              id: 313,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 2,
          name: "触摸通道",
          child: [
            {
              id: 5309,
              name: "松翰",
            },
            {
              id: 5310,
              name: "健天",
            },
            {
              id: 5311,
              name: "复旦微",
            },
            {
              id: 5312,
              name: "辉芒微",
            },
            {
              id: 5313,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 3,
          name: "LCD",
          child: [
            {
              id: 56309,
              name: "松翰",
            },
            {
              id: 56310,
              name: "健天",
            },
            {
              id: 56311,
              name: "复旦微",
            },
            {
              id: 56312,
              name: "辉芒微",
            },
            {
              id: 56313,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 4,
          name: "DMA",
          child: [
            {
              id: 535609,
              name: "松翰",
            },
            {
              id: 535610,
              name: "健天",
            },
            {
              id: 535611,
              name: "复旦微",
            },
            {
              id: 535612,
              name: "辉芒微",
            },
            {
              id: 535613,
              name: "东软载波",
            },
          ],
        },
        {
          comId: 5,
          name: "硬件加密",
          child: [
            {
              id: 53096,
              name: "松翰",
            },
            {
              id: 53106,
              name: "健天",
            },
            {
              id: 53116,
              name: "复旦微",
            },
            {
              id: 53126,
              name: "辉芒微",
            },
            {
              id: 53136,
              name: "东软载波",
            },
          ],
        },
      ], //其他特性数据
      featuresDate: {}, //其他特性
      allFeaturesDate: [[]],
      allFeaturesArr: [[]],
      featuresId: [[]],
      filter: [], //过滤数据
      allFilter: [],
      packages: [], //封装数据
      packagesArr: [], //封装添加到过滤数据
      memory: [], //内存数据
      memoryArr: [], //内存添加到过滤数据
      eeprom: [], //EEPROM
      eepromArr: [],
      maxio: [], //最大I/Os
      maxioArr: [],
      adc: [], //ADC
      adcArr: [],
      serialport: [], //串口
      serialportArr: [],
      amplifier: [], //运放
      amplifierArr: [],
      comparator: [], //比较器
      comparatorArr: [],
      timer: [], //通用定时器
      timerArr: [],
      twelvec: [], //12c
      twelvecArr: [], //12c
      spi: [], //SPI
      spiArr: [],
      record: {
        filterBrand: [],
        filterCustom: [[]],
        packageInput: "",
        packageCheck: [],
        memoryInput: "",
        memoryCheck: [],
        eepromInput: "",
        eepromCheck: [],
        maxioInput: "",
        maxioCheck: [],
        adcInput: "",
        adcCheck: [],
        interfaceCheck: [[]],
        featuresCheck: [[]],
        peripheralsCheck: [[]],
        partNum: "",
      },
      tableData: [
        {
          //对比数据
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
    };
  },
  methods: {
    // 跳转路由
    goElectric() {
      this.$router.push("/electric");
    },
    goWireless() {
      this.$router.push("/wireless");
    },
    // 当前路由id
    selectModel(val) {
      this.categoryId = val.path.slice(8);
      // console.log(this.categoryId,'444444');
      let params = {
        categoryId: this.categoryId,
      };
      // console.log(this.properties.length,'111111111')
      getCategoriesOption(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.brands = res.result.brands;
          this.brands.map((item) => {
            this.$set(item, "active", false);
            this.$set(item, "subject", "品牌");
          });
          this.packages = res.result.packages;
          this.packages.map((item) => {
            this.$set(item, "active", false);
            this.$set(item, "subject", "封装");
          });
          this.packing = res.result.packings;
          this.packing.map((item) => {
            this.$set(item, "active", false);
            this.$set(item, "subject", "包装");
          });
          this.propertiesBox = res.result.properties;
          this.propertiesBox.map(item=>{
            this.$set(item, "active", false);
          }) 
            this.propertiesLeft = this.propertiesBox.slice(0,3);
            this.propertiesLeft.map((item, i) => {
              this.$set(item, "model", i);
              this.$set(item, "propLeftType", false);
              item.valueText.map((val) => {
                this.$set(val, "active", false);
              });
              console.log(this.propertiesLeft,'22222222')
            });
            this.propertiesRight = this.propertiesBox.slice(3,this.propertiesBox.length)
            console.log(this.propertiesRight,'22222222333')
         
        }
      });
    },
    // 点击过滤
    handleSiftingSort(index, active, field) {
      let tempArr = this[field];
      let tempArr1 = []; //品牌过滤的数组
      let combinationVal = []; //选中的数组
      tempArr.forEach((item, arrIndex) => {
        if (index === arrIndex) {
          item.active = !active;
        }
        if (item.active) {
          combinationVal.push(item);
        }
      });
      // console.log(combinationVal)
      let filterbrandId = []; //选中的id
      let filterbrandName = []; //选中的name
      combinationVal.map((val) => {
        filterbrandId.push(val.brandId);
        filterbrandName.push(val.brandName);
      });
      //  console.log(combinationVal,'11111')
      this.record.filterBrand = filterbrandId;
      // console.log(filterbrandName.length);
      if (filterbrandName.length > 0) {
        tempArr1.push({
          combinationName:
            tempArr[0].subject + "：" + filterbrandName.join("/"),
          ...combinationVal,
        });
      }
      this.tempBrandArr = tempArr1;
      this.filter = [
        ...this.tempBrandArr,
        ...this.customArr,
        ...this.packagesArr,
        ...this.memoryArr,
        ...this.eepromArr,
        ...this.maxioArr,
        ...this.adcArr,
        ...this.allPeripheralsDate,
        ...this.allInterfaceDate,
        ...this.allFeaturesDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // 标签删除
    handleClose(item) {
      console.log(item, "111111111111111111");
      let filterId = [];
      this.filter.map((val, i) => {
        if (Array.isArray(val)) {
          // 自定义筛选项
          if (val[0].combinationName == item[0].combinationName) {
            val.map((obj) => {
              console.log(obj);
              let arr = Object.values(obj);
              arr.map((temp) => {
                if (temp.active) {
                  temp.active = !temp.active;
                  filterId.push(temp.id);
                }
              });
            });
            this.filter.splice(i, 1);
          }
        } else {
          // 固定标签
          if (val.combinationName == item.combinationName) {
            let arr = Object.values(val);
            arr.map((val) => {
              if (val.active) {
                val.active = !val.active;
                filterId.push(val.id);
              }
            });
            this.filter.splice(i, 1);
          }
        }
      });
      // 自定义选项
      this.record.filterCustom.map((arr, i) => {
        if (arr.toString() == filterId.toString()) {
          this.record.filterCustom.splice(i, 1);
        }
      });
      // 品牌id
      this.record.filterBrand.map((brandId) => {
        filterId.map((id) => {
          if (brandId == id) {
            this.record.filterBrand = [];
          }
        });
      });
      // 封装
      this.record.packageCheck.map((brandId) => {
        filterId.map((id) => {
          if (brandId == id) {
            this.record.packageCheck = [];
          }
        });
      });

      // 内存
      this.record.memoryCheck.map((brandId) => {
        filterId.map((id) => {
          if (brandId == id) {
            this.record.memoryCheck = [];
          }
        });
      });
      // EEPROM
      this.record.eepromCheck.map((brandId) => {
        filterId.map((id) => {
          if (brandId == id) {
            this.record.eepromCheck = [];
          }
        });
      });
      // 最大I/OS
      this.record.maxioCheck.map((brandId) => {
        filterId.map((id) => {
          if (brandId == id) {
            this.record.maxioCheck = [];
          }
        });
      });
      // ADC
      this.record.adcCheck.map((brandId) => {
        filterId.map((id) => {
          if (brandId == id) {
            this.record.adcCheck = [];
          }
        });
      });
      //常见外设
      this.record.peripheralsCheck.map((arr, i) => {
        if (arr.toString() == filterId.toString()) {
          this.record.peripheralsCheck.splice(i, 1);
        }
      });
      // 通讯接口
      this.record.interfaceCheck.map((arr, i) => {
        if (arr.toString() == filterId.toString()) {
          this.record.interfaceCheck.splice(i, 1);
        }
      });
      // 其他特性
      this.record.featuresCheck.map((arr, i) => {
        if (arr.toString() == filterId.toString()) {
          this.record.featuresCheck.splice(i, 1);
        }
      });
    },
    // 自定义筛选项
    SureEdit() {
      let arr = this.brand.map(function (item) {
        if (item.active === true) {
          return item.id;
        }
      });
      // console.log(arr);
      this.systemIds = arr.filter((item) => {
        return item;
      });
      // console.log(this.systemIds);
      this.coustom.map((item, i) => {
        this.$set(item, "model", i);
        this.$set(item, "customType", false);
        item.child.map((val) => {
          this.$set(val, "active", false);
        });
      });
      console.log(this.coustom);
      this.$refs.dropdown.showPopper = !this.$refs.dropdown.showPopper;
    },
    // 自定义点击过滤
    handleCustomFilter(key, index, item) {
      this.allArr[index] = [];
      let tempArr = [item];
      this.customArr[index] = [];
      let arr = [];
      tempArr.map((val) => {
        val.child.map((content, arrIndex) => {
          if (key === arrIndex) {
            content.active = !content.active;
          }
          if (content.active) {
            this.$set(content, "subject", item.name);
            arr.push(content);
          }
        });
      });
      this.allArr[index] = this.allArr[index].concat(arr);
      this.record.filterCustom[index] = [];
      this.filterCustomName[index] = [];
      this.allArr[index].map((val) => {
        this.record.filterCustom[index].push(val.id);
        this.filterCustomName[index].push(val.name);
      });
      // console.log(this.record.filterCustom,'444444444444');
      if (this.filterCustomName[index].length > 0) {
        this.customArr[index].push({
          combinationName:
            this.allArr[index][0].subject +
            "：" +
            this.filterCustomName[index].join("/"),
          ...this.allArr[index],
        });
      }
      this.filter = [
        ...this.tempBrandArr,
        ...this.customArr,
        ...this.packagesArr,
        ...this.memoryArr,
        ...this.eepromArr,
        ...this.maxioArr,
        ...this.adcArr,
        ...this.allPeripheralsDate,
        ...this.allInterfaceDate,
        ...this.allFeaturesDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    handlerBrand() {
      getVideoBrand().then((res) => {
        this.brand = res.result;
        this.brand.map((item) => {
          this.$set(item, "active", false);
          this.$set(item, "subject", "品牌");
        });
        // console.log(this.brand);
      });
    },
    // 左边动态
    getpropLeftMore(item,index){
      item.propLeftType = !item.propLeftType;
    },
    // 自定义筛选点击更多
    getMore(item, index) {
      console.log(item, index);
      item.customType = !item.customType;
      console.log(item.customType);
    },
    // 封装变化事件 可优化代码
    handlerPackages(val) {
      let tempArr1 = [];
      this.packages.push(val);
      this.packages = this.packages.filter((item) => {
        return item.active != false;
      });
      console.log(this.packages);
      let packageId = [];
      let packageName = [];
      this.packages.map((item) => {
        packageId.push(item.id);
        packageName.push(item.name);
      });
      if (packageName.length > 0) {
        tempArr1.push({
          combinationName:
            this.packages[0].subject + "：" + packageName.join("/"),
          ...this.packages,
        });
      }
      this.record.packageCheck = packageId;
      this.packagesArr = tempArr1;
      this.filter = [
        ...this.tempBrandArr,
        ...this.customArr,
        ...this.packagesArr,
        ...this.memoryArr,
        ...this.eepromArr,
        ...this.maxioArr,
        ...this.adcArr,
        ...this.allPeripheralsDate,
        ...this.allInterfaceDate,
        ...this.allFeaturesDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // 内存变化事件
    handlerMemory(val) {
      this.memory.push(val);
      this.memory = this.packages.filter((item) => {
        return item.active != false;
      });
      let packageId = [];
      let packageName = [];
      let tempArr1 = [];
      this.memory.map((item) => {
        packageId.push(item.id);
        packageName.push(item.name);
      });
      if (packageName.length > 0) {
        tempArr1.push({
          combinationName:
            this.memory[0].subject + "：" + packageName.join("/"),
          ...this.memory,
        });
      }
      this.record.memoryCheck = packageId;
      this.memoryArr = tempArr1;
      this.filter = [
        ...this.tempBrandArr,
        ...this.customArr,
        ...this.packagesArr,
        ...this.memoryArr,
        ...this.eepromArr,
        ...this.maxioArr,
        ...this.adcArr,
        ...this.allPeripheralsDate,
        ...this.allInterfaceDate,
        ...this.allFeaturesDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // EEPROM
    handlerEeprom(val) {
      this.eeprom.push(val);
      this.eeprom = this.packages.filter((item) => {
        return item.active != false;
      });
      let packageId = [];
      let packageName = [];
      let tempArr1 = [];
      this.eeprom.map((item) => {
        packageId.push(item.id);
        packageName.push(item.name);
      });
      if (packageName.length > 0) {
        tempArr1.push({
          combinationName:
            this.eeprom[0].subject + "：" + packageName.join("/"),
          ...this.eeprom,
        });
      }
      this.record.eepromCheck = packageId;
      this.eepromArr = tempArr1;
      console.log(this.eepromArr);
      this.filter = [
        ...this.tempBrandArr,
        ...this.customArr,
        ...this.packagesArr,
        ...this.memoryArr,
        ...this.eepromArr,
        ...this.maxioArr,
        ...this.adcArr,
        ...this.allPeripheralsDate,
        ...this.allInterfaceDate,
        ...this.allFeaturesDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // 最大I/Os
    handlerMaxio(val) {
      this.maxio.push(val);
      this.maxio = this.packages.filter((item) => {
        return item.active != false;
      });
      let packageId = [];
      let packageName = [];
      let tempArr1 = [];
      this.maxio.map((item) => {
        packageId.push(item.id);
        packageName.push(item.name);
      });
      if (packageName.length > 0) {
        tempArr1.push({
          combinationName: this.maxio[0].subject + "：" + packageName.join("/"),
          ...this.maxio,
        });
      }
      this.record.maxioCheck = packageId;
      this.maxioArr = tempArr1;
      console.log(this.maxioArr);
      this.filter = [
        ...this.tempBrandArr,
        ...this.customArr,
        ...this.packagesArr,
        ...this.memoryArr,
        ...this.eepromArr,
        ...this.maxioArr,
        ...this.adcArr,
        ...this.allPeripheralsDate,
        ...this.allInterfaceDate,
        ...this.allFeaturesDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // ADC
    handlerAdc(val) {
      this.adc.push(val);
      this.adc = this.packages.filter((item) => {
        return item.active != false;
      });
      let packageId = [];
      let packageName = [];
      let tempArr1 = [];
      this.adc.map((item) => {
        packageId.push(item.id);
        packageName.push(item.name);
      });
      if (packageName.length > 0) {
        tempArr1.push({
          combinationName: this.adc[0].subject + "：" + packageName.join("/"),
          ...this.adc,
        });
      }
      this.record.adcCheck = packageId;
      this.adcArr = tempArr1;
      console.log(this.adcArr);
      this.filter = [
        ...this.tempBrandArr,
        ...this.customArr,
        ...this.packagesArr,
        ...this.memoryArr,
        ...this.eepromArr,
        ...this.maxioArr,
        ...this.adcArr,
        ...this.allPeripheralsDate,
        ...this.allInterfaceDate,
        ...this.allFeaturesDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // 串口
    // handlerSerialport(){
    //   let packageId = [];
    //   let packageName = [];
    //   let tempArr1 = [];
    //   this.serialport.map(item=>{
    //     packageId.push(item.id);
    //     packageName.push(item.name)
    //   })
    //   if(packageName.length > 0){
    //     tempArr1.push({ combinationName:this.serialport[0].subject + '：' + packageName.join('/'),...this.serialport})
    //   }
    //   this.record.serialportCheck = packageId;
    //   this.serialportArr = tempArr1;
    //   // console.log(this.serialportArr);
    //   this.filter = [...this.tempBrandArr,...this.customArr,...this.packagesArr,...this.memoryArr,...this.eepromArr,...this.maxioArr,...this.adcArr,...this.serialportArr]
    // },
    // // 运放
    // handlerAmplifier(){
    //   let packageId = [];
    //   let packageName = [];
    //   let tempArr1 = [];
    //   this.amplifier.map(item=>{
    //     packageId.push(item.id);
    //     packageName.push(item.name)
    //   })
    //   if(packageName.length > 0){
    //     tempArr1.push({ combinationName: this.amplifier[0].subject + '：' + packageName.join('/'),... this.amplifier})
    //   }
    //   this.record.amplifierCheck = packageId;
    //   this.amplifierArr = tempArr1;
    //   // console.log(this.serialportArr);
    //   this.filter = [...this.tempBrandArr,...this.customArr,...this.packagesArr,...this.memoryArr,...this.eepromArr,...this.maxioArr,...this.adcArr,...this.serialportArr,...this.amplifierArr]
    // },
    // // 比较器
    // handlerComparator(){
    //   let packageId = [];
    //   let packageName = [];
    //   let tempArr1 = [];
    //   this.comparator.map(item=>{
    //     packageId.push(item.id);
    //     packageName.push(item.name)
    //   })
    //   if(packageName.length > 0){
    //     tempArr1.push({ combinationName: this.comparator[0].subject + '：' + packageName.join('/'),...this.comparator})
    //   }
    //   this.record.comparatorCheck = packageId;
    //   this.comparatorArr = tempArr1;
    //   // console.log(this.serialportArr);
    //   this.filter = [...this.tempBrandArr,...this.customArr,...this.packagesArr,...this.memoryArr,...this.eepromArr,...this.maxioArr,...this.adcArr,...this.serialportArr,...this.amplifierArr,this.comparatorArr]
    // },
    // // 通用定时器
    // handlerTimer(){
    //   let packageId = [];
    //   let packageName = [];
    //   let tempArr1 = [];
    //   this.timer.map(item=>{
    //     packageId.push(item.id);
    //     packageName.push(item.name)
    //   })
    //   if(packageName.length > 0){
    //     tempArr1.push({ combinationName: this.timer[0].subject + '：' + packageName.join('/'),...this.timer})
    //   }
    //   this.record.timerCheck = packageId;
    //   this.timerArr = tempArr1;
    //   // console.log(this.serialportArr);
    //   this.filter = [...this.tempBrandArr,...this.customArr,...this.packagesArr,...this.memoryArr,...this.eepromArr,...this.maxioArr,...this.adcArr,...this.serialportArr,...this.amplifierArr,this.comparatorArr,...this.timerArr]
    // },
    // // 12c
    // handlerTwelvec(){
    //   let packageId = [];
    //   let packageName = [];
    //   let tempArr1 = [];
    //   this.twelvec.map(item=>{
    //     packageId.push(item.id);
    //     packageName.push(item.name)
    //   })
    //   if(packageName.length > 0){
    //     tempArr1.push({ combinationName: this.twelvec[0].subject + '：' + packageName.join('/'),...this.twelvec})
    //   }
    //   this.record.twelvecCheck = packageId;
    //   this.twelvecArr = tempArr1;
    //   this.filter = [...this.tempBrandArr,...this.customArr,...this.packagesArr,...this.memoryArr,...this.eepromArr,...this.maxioArr,...this.adcArr,...this.serialportArr,...this.amplifierArr,...this.comparatorArr,...this.timerArr,...this.twelvecArr,...this.spiArr];
    // },
    // // SPI
    // handlerSPI(){
    //   let packageId = [];
    //   let packageName = [];
    //   let tempArr1 = [];
    //   this.spi.map(item=>{
    //     packageId.push(item.id);
    //     packageName.push(item.name)
    //   })
    //   if(packageName.length > 0){
    //     tempArr1.push({ combinationName: this.spi[0].subject + '：' + packageName.join('/'),...this.spi})
    //   }
    //   this.record.spiCheck = packageId;
    //   this.spiArr = tempArr1;
    //   this.filter = [...this.tempBrandArr,...this.customArr,...this.packagesArr,...this.memoryArr,...this.eepromArr,...this.maxioArr,...this.adcArr,...this.serialportArr,...this.amplifierArr,...this.comparatorArr,...this.timerArr,...this.twelvecArr,...this.spiArr];

    // },
    // 常见外设
    handlerPeripherals(index, item) {
      this.allPeripheralsDate[index] = [];
      this.record.peripheralsCheck[index] = [];
      this.peripheralsId[index] = [];
      this.allPeripheralsArr[index] = [];
      let packageId = [];
      let packageName = [];
      let findItem = "";
      let tempArr = [];
      this.peripherals.map((val, i) => {
        if (index == i) {
          this.peripheralsDate[val.model].push(item);
          this.peripheralsDate[val.model] = this.peripheralsDate[
            val.model
          ].filter((obj) => {
            return obj.active != false;
          });
          this.peripheralsDate[val.model].map((item) => {
            packageId.push(item.id);
            packageName.push(item.name);
            findItem = this.peripherals.find((itemSub) =>
              itemSub.child.some((itemThirdSub) => itemThirdSub.id === item.id)
            );
          });
          if (packageName.length > 0) {
            tempArr.push({
              combinationName: findItem.name + "：" + packageName.join("/"),
              ...this.peripheralsDate[val.model],
            });
          }
        }
      });

      this.allPeripheralsArr[index] =
        this.allPeripheralsArr[index].concat(tempArr);
      this.peripheralsId[index] = this.peripheralsId[index].concat(packageId);
      this.record.peripheralsCheck = this.peripheralsId.filter((item) => {
        return item != null && item != 0;
      });
      this.allPeripheralsDate = this.allPeripheralsArr.filter((item) => {
        return item != null && item != 0;
      });

      this.filter = [
        ...this.tempBrandArr,
        ...this.customArr,
        ...this.packagesArr,
        ...this.memoryArr,
        ...this.eepromArr,
        ...this.maxioArr,
        ...this.adcArr,
        ...this.allPeripheralsDate,
        ...this.allInterfaceDate,
        ...this.allFeaturesDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // 通讯接口
    handlerInterface(index, item) {
      this.allInterfaceDate[index] = [];
      this.record.interfaceCheck[index] = [];
      this.interfaceId[index] = [];
      this.allInterfaceArr[index] = [];
      let packageId = [];
      let packageName = [];
      let findItem = "";
      let tempArr = [];
      this.interface.map((val, i) => {
        if (index == i) {
          this.interfaceDate[val.model].push(item);
          this.interfaceDate[val.model] = this.interfaceDate[val.model].filter(
            (obj) => {
              return obj.active != false;
            }
          );
          this.interfaceDate[val.model].map((item) => {
            packageId.push(item.id);
            packageName.push(item.name);
            findItem = this.interface.find((itemSub) =>
              itemSub.child.some((itemThirdSub) => itemThirdSub.id === item.id)
            );
          });
          if (packageName.length > 0) {
            tempArr.push({
              combinationName: findItem.name + "：" + packageName.join("/"),
              ...this.interfaceDate[val.model],
            });
          }
        }
      });

      this.allInterfaceArr[index] = this.allInterfaceArr[index].concat(tempArr);
      this.interfaceId[index] = this.interfaceId[index].concat(packageId);
      this.record.interfaceCheck = this.interfaceId.filter((item) => {
        return item != null && item != 0;
      });
      this.allInterfaceDate = this.allInterfaceArr.filter((item) => {
        return item != null && item != 0;
      });
      this.filter = [
        ...this.tempBrandArr,
        ...this.customArr,
        ...this.packagesArr,
        ...this.memoryArr,
        ...this.eepromArr,
        ...this.maxioArr,
        ...this.adcArr,
        ...this.allPeripheralsDate,
        ...this.allInterfaceDate,
        ...this.allFeaturesDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // 其他特性
    handlerFeatures(index, item) {
      this.allFeaturesDate[index] = [];
      this.record.featuresCheck[index] = [];
      this.featuresId[index] = [];
      this.allFeaturesArr[index] = [];
      let packageId = [];
      let packageName = [];
      let findItem = "";
      let tempArr = [];
      this.features.map((val, i) => {
        if (index == i) {
          this.featuresDate[val.model].push(item);
          this.featuresDate[val.model] = this.featuresDate[val.model].filter(
            (obj) => {
              return obj.active != false;
            }
          );
          this.featuresDate[val.model].map((item) => {
            packageId.push(item.id);
            packageName.push(item.name);
            findItem = this.features.find((itemSub) =>
              itemSub.child.some((itemThirdSub) => itemThirdSub.id === item.id)
            );
          });
          if (packageName.length > 0) {
            tempArr.push({
              combinationName: findItem.name + "：" + packageName.join("/"),
              ...this.featuresDate[val.model],
            });
          }
        }
      });
      this.allFeaturesArr[index] = this.allFeaturesArr[index].concat(tempArr);
      this.featuresId[index] = this.featuresId[index].concat(packageId);
      this.record.featuresCheck = this.featuresId.filter((item) => {
        return item != null && item != 0;
      });
      this.allFeaturesDate = this.allFeaturesArr.filter((item) => {
        return item != null && item != 0;
      });
      this.filter = [
        ...this.tempBrandArr,
        ...this.customArr,
        ...this.packagesArr,
        ...this.memoryArr,
        ...this.eepromArr,
        ...this.maxioArr,
        ...this.adcArr,
        ...this.allPeripheralsDate,
        ...this.allInterfaceDate,
        ...this.allFeaturesDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // 表格
    getProductList() {
      getList().then((res) => {
        console.log(res);
      });
    },
  },
  created() {
    this.handlerBrand();
    this.peripherals.map((item, i) => {
      this.$set(item, "model", i);
      this.$set(this.peripheralsDate, item.model, []);
      item.child.map((val) => {
        this.$set(val, "active", false);
      });
    });
    this.interface.map((item, i) => {
      // console.log(item)
      this.$set(item, "model", i);
      this.$set(this.interfaceDate, item.model, []);
      item.child.map((val) => {
        this.$set(val, "active", false);
      });
    });
    console.log(this.interface);
    this.features.map((item, i) => {
      this.$set(item, "model", i);
      this.$set(this.featuresDate, item.model, []);
      item.child.map((val) => {
        this.$set(val, "active", false);
      });
    });
  },
  watch: {
    $route: {
      handler(val) {
        // console.log(val,'1111111')
        this.selectModel(val);
      },
      immediate: true,
      deep: true,
    },
    brands: function () {
      this.$nextTick(function () {
        let cur = this.$refs["brandTypeRef"];
        if (cur) {
          this.brandHieight = cur.scrollHeight;
        }
      });
    },
    packages: function () {
      this.$nextTick(function () {
        let cur = this.$refs["packagesTypeRef"];
        if (cur) {
          this.packagesHieight = cur.scrollHeight;
        }
      });
    },
    packing: function () {
      this.$nextTick(function () {
        let cur = this.$refs["packingTypeRef"];
        if (cur) {
          this.packingHieight = cur.scrollHeight;
          // console.log(this.packingHieight, "22222");
        }
      });
    },
    propertiesLeft:{
      handler(newVal, oldVal) {
        let that = this;
        that.$nextTick(function () {
          newVal.map((item, i) => {
            let cur = that.$refs[`propLeftTypeRef${i}`][0];
            if (cur) {
              that.$set(that.propLeftHieight, item.model, item.model);
              that.propLeftHieight[item.model] = cur.scrollHeight;
            }
          });
        });
      },
      immediate: true,
      deep: true,
    },
    coustom: {
      handler(newVal, oldVal) {
        let that = this;
        that.$nextTick(function () {
          newVal.map((item, i) => {
            let cur = that.$refs[`customTypeRef${i}`][0];
            if (cur) {
              that.$set(that.customHieight, item.model, item.model);
              that.customHieight[item.model] = cur.scrollHeight;
            }
          });
        });
      },
      immediate: true,
      deep: true,
    },
    record: {
      handler(val, oldval) {
        console.log(val, "33333");
        // this.handlewatchPCBlist(val);
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@import "./../../../assets/style/edit.css";
.currency {
  padding: 3px 0 0;
  width: 100%;
  font-size: 15px;
  // height: 83%;;
  .head {
    width: 100%;
    padding: 20px;
    background: #fff;
    .head-btn {
      margin-top: 20px;
      display: flex;
      .btn {
        margin-right: 30px;
      }
    }
  }
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 3px 0 0;
    background: #fff;
    justify-content: space-between;
    .left {
      width: 83%;
      padding: 30px 0 0;
      background: #eee;
      cursor: pointer;
      .screen {
        padding: 0 30px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        .el-dropdown {
          border: 1px solid #000;
          border-radius: 5px;
          padding: 10px;
        }
      }
      h4 {
        line-height: 40px;
        width: 12%;
        text-align: right;
      }
      .brandheight {
          height: 300px;
          overflow-y: scroll;
        }
      .brand-list {
        display: flex;
        flex-wrap: wrap;
        width: 89%;
        justify-content: flex-start;
        li {
          line-height: 40px;
          span {
            padding: 0 18px 0;
          }
          .active {
            padding: 5px 10px;
            margin: 0 7px 0;
            border: 1px solid #f00;
            border-radius: 22px;
            color: #f00;
          }
        }
      }
      .unfold {
        font-size: 14px;
        color: #66b1ff;
        cursor: pointer;
        font-style: normal;
        vertical-align: middle;
        display: inline-block;
        height: 40px;
        line-height: 40px;
      }
      .filter-box {
        padding: 0 0 10px 2%;
        .filter-content {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          p {
            color: #86909c;
          }
          .el-tag {
            border-radius: 18px;
            color: #000;
            font-size: 14px;
            margin-right: 20px;
          }
        }
      }
      .filter-table {
        background: #eee;
      }
    }
    .right {
      width: 16%;
      background: #eee;
      h3 {
        margin: 20px 0 20px 20px;
      }
      .el-submenu {
        border: 1px solid #ccc;
        .el-menu-item {
          background-color: #eee !important;
          padding: 0 21px !important;
          // width: 50%;
          // min-width: none;
          .el-input__inner {
            height: 33px;
          }
        }
        .el-menu-item-group {
          .el-menu-item {
            width: 50%;
            min-width: 0;
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }
  }
}
.el-dropdown-menu{
    width: 30%;
  }
.sure {
  margin: auto;
  display: block;
}
.el-divider {
  margin: 10px 0;
  background: 0 0;
  border-top: 1px dashed #000;
}
.show {
  height: auto;
  width: 100%;
  display: flex;
  padding: 0 30px;
  // line-height: 40px;
  text-align: center;
}
.hidden {
  height: 40px;
  overflow: hidden;
  width: 100%;
  display: flex;
  padding: 0 30px;
  // line-height: 40px;
  text-align: center;
}
</style>